<template>
	<view :style="{height: Height+'px'}" class="recommend">
		<view class="qrbg">
			<!-- <image src="../../static/logo.png" mode=""></image> -->
			<image class="qr" :src="'data:image/png;base64,'+src2"></image>
		</view>
		<view class="rule" @tap="rules">
			规则
		</view>
		<view class="record" @tap="openinviterecord">
			<view class="">
				邀请记录
			</view>
			<image class="mt-1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/recommend.png" mode=""></image>
		</view>
		<wybpopup ref="popup" type='center' :width="500" :height="624" :radius="0">
			<view class="popup">
				
			</view>
			<view class="typeBtn" @tap="sure">
				确定
			</view>
		</wybpopup>
		<orange-fullloading textcolor="#4CA6FF" textsize="30" :loadshow="loadshow" text="加载中"></orange-fullloading>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup  from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
		          wybpopup
		       },
		data() {
			return {
				loadshow:true,
				Height:400,
				qr:'',
				src2:'',
			}
		},
		onLoad (query) {
					 if(this.loginState){
						  // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
						const scene = decodeURIComponent(query.scene)
						console.log('扫码结果='+scene)
						this.qr = scene
						if (scene!=="undefined") {
							this.decode()
						}
					 }else{
						 uni.navigateTo({
						 	url:'../login/login'
						 })
					 }
		 },
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.Height = res.windowHeight - uni.upx2px(0) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onShow(){
				this.getQRcode()
				this.getAccessToken()
				
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			// 计算规则
			rules(){
				this.$refs.popup.show()
			},
			close(){
				this.$refs.popup.hide()
			},
			sure(){
				this.$refs.popup.hide()
			},
			//绑定推荐用户
			decode(){
				this.$api.decode({
					decode:this.qr
				}).then((res) => {
					console.log('9999999999'+res.data)
					if (res.data.success) {
						console.log('111111111111111111111111')
						console.log(res.data.dataMap)
						setTimeout(function(){
							uni.showToast({
								title: "绑定成功",
								duration: 2500,
								icon:'none'
							});
							setTimeout(function(){
								uni.switchTab({
								url:'mine'
							})
							},3000)
						},500)
							
							
							
						
					}else{
						console.log('222222222222222222222')
						console.log('22222222222222'+res.data.dataMap)
						console.log('22222222222222'+JSON.stringify(res.data.dataMap))
						setTimeout(function(){
							uni.showToast({
								title:res.data.message,
								duration:2500,
								icon:'none'
							})
							setTimeout(function(){
								uni.switchTab({
								url:'mine'
							})
							},3000)
						},500)
						
						
						
						
					}
				})
			},
			openinviterecord(){
				uni.navigateTo({
					url:'Invitedrecord'
				})
			},
			getQRcode(){
				this.$api.getQRcode().then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.qr = res.data.dataMap
						console.log(this.qr)
					}
				})
			},
			//获取access_token
			getAccessToken(){
				this.$api_common.getAccessToken({
					accessId:'AfcMxdqEempG46jTLPN1hzXRt',
					type:1
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.getcode(res.data.dataMap.access_token)
					}
				})
			},
			getcode(access_token){
			    var that=this;
			    var scene=this.qr;//拼接你要添加的参数
			    wx.request({
			      url: 'https://weixin.xiangban365.com/wxa/getwxacodeunlimit?access_token=' + access_token,
			      data: {
			        scene: scene,
			        page: 'pages/mine/Recommend',//线上的小程序一定要有这个页面
			      },
			      method:'POST',
			      responseType: 'arraybuffer',
			      success:(res)=>{
					  console.log(res)
					  this.loadshow = false
			        this.src2 = wx.arrayBufferToBase64(res.data);  

			
			
			      }
			    })
			  },
			
		}
	}
</script>

<style lang="less" scoped>
	.popup{
		width: 500rpx;
		height: 624rpx;
		background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/tanchuang%402x.png) no-repeat;
			background-size: 100% 100%;
	}
	.typeBtn{
		width: 500rpx;
		height: 100rpx;
		background: #4CA6FF;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		position: fixed;
		bottom: 0rpx;
	}
	.qrbg{
		image{
			position: relative;
			top: 450rpx;
			left: 250rpx;
			width: 220rpx;
			height: 220rpx;
			border: 10rpx solid #FF8338;
			border-radius: 20rpx;
		}
		
		
	}
.recommend{
	width: 750rpx;
	background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/bg%402x%20%284%29.png) no-repeat;
	background-size: 100% 100%;
	position: relative;
	.rule{
		width: 40rpx;
		height: 80rpx;
		background: #000000;
		opacity: 0.3;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
		font-size: 28rpx;
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		position: absolute;
		right: 0;
		top: 36rpx;
	}
	.record{
		width: 48rpx;
		height: 180rpx;
		background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/anniu@2x.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 0;
		top: 154rpx;
		font-size: 26rpx;
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		padding-top: 30rpx;
		line-height: 30rpx;
		image{
			width: 28rpx;
			height: 28rpx;
		}
	}
}
</style>
